<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{component/_layout :: layout(~{::title},~{::headTitle}, ~{::section},~{::link},~{::script})}">
<head>
    <meta charset="UTF-8">
    <title>巡查检查系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/css/elementUI.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo.css}">
</head>
<body>
<!--自定义头部标题-->
<headTitle>
    <h2 class="headTitle">巡查通讯录</h2>
</headTitle>
<!--自定义的主页样式-->
<section>
    <div id="app">
        <!--展示通讯录表格-->
        <el-table :data="addressBookData" height="525" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="name" label="姓名" width="150"></el-table-column>
            <el-table-column prop="age" label="年龄" width="100"></el-table-column>
            <el-table-column prop="compan" label="所属公司" width="150"></el-table-column>
            <el-table-column prop="phone" label="联系电话" width="180"></el-table-column>
            <el-table-column prop="createdBy" label="创建人" width="150"></el-table-column>
            <el-table-column prop="idCard" label="巡查人员身份证信息" width="190"></el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="170"></el-table-column>
            <el-table-column width="200" align="right">
                <template slot="header" slot-scope="scope">
                    <div style="display: flex;">
                        <el-button size="mini" @click="centerDialogVisible=true">新增</el-button>
                        &nbsp;&nbsp;&nbsp;
                        <el-input v-model="ps.name" size="mini" @change="queryBook" placeholder="输入姓名搜索"/>
                    </div>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="bookDelete(addressBookData[scope.$index].id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页插件-->
        <el-pagination class="pageModel"
                       background
                       layout="prev, pager, next"
                       :current-page="index"
                       @current-change="updatePage"
                       :page-size="page"
                       :total="sumPage">
        </el-pagination>
        <!--弹出操作框-->
        <el-dialog title="新增通讯录" :visible.sync="centerDialogVisible" width="30%" center>
            <el-input class="uploadUser" placeholder="姓名" v-model="name" clearable></el-input>
            <el-input class="uploadUser" placeholder="年龄" v-model="age" clearable></el-input>
            <el-select v-model="compan" @change="getKey" placeholder="所属公司" class="uploadUser" style="width: 100%">
                <el-option
                        v-for="item in sumCompan"
                        :key="item.code"
                        :label="item.name"
                        :value="item.name">
                </el-option>
            </el-select>
            <el-input class="uploadUser" placeholder="联系电话" v-model="phone" clearable></el-input>
            <el-input class="uploadUser" placeholder="巡查人员身份证信息" v-model="idCard" clearable></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isNull()">取 消</el-button>
                <el-button type="primary" @click="addBook">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</section>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: function () {
            return {
                //当前页数
                index: 1,
                //每页显示多少条数据
                page: 7,
                //总共多少条数据
                sumPage: 0,
                //弹出新增框
                centerDialogVisible:false,
                //获取到通讯录的信息
                addressBookData: [],
                //公司名
                sumCompan:{},
                //搜索关键字
                ps:{
                    name:'',
                    compan:'',
                    phone:'',
                    idCard:'',
                },
                pss:{code:'',name:'',fDisable:''},
                //新增的参数
                //联系人姓名
                name:'',
                //年龄
                age:'',
                //所属公司
                compan:'',
                //所属公司Id
                companId:'',
                //联系电话
                phone:'',
                //巡查人员身份证信息
                idCard:'',
            }
        },
        //加载事件
        created() {
            this.getAddressBookData(this.index,this.page);
            //查询公司信息
            axios.get(`/yyds/machine_system/sys-compan/list/1/900/`,{
                params: this.ps
            }).then(resp=>{
                this.sumCompan = resp.data.map.items;
            });
        },
        //函数集群
        methods: {
            getAddressBookData(index,page){
                axios.get(`/yyds/machine_system/mc-addressbook/list/${index}/${page}`,{
                    params: this.ps
                }).then(resp=>{
                    this.addressBookData = resp.data.map.items;
                    this.sumPage = resp.data.map.total;
                });
            },
            queryBook(){
                this.getAddressBookData(1,this.page);
            },
            updatePage(rep){
                this.getAddressBookData(rep,this.page);
            },
            //删除
            bookDelete(id){
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/yyds/machine_system/mc-addressbook/delete/${id}`).then(resp=>{
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getAddressBookData(1, this.page);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //新增
            addBook(){
                if (
                    this.name==''||this.age==''||this.compan==''||
                    this.phone==''||this.idCard==''
                ){
                    this.$message({
                        message: '请完善信息',
                        type: 'warning'
                    });
                    return;
                }
                let pid = "1";
                axios.post("/yyds/machine_system/mc-addressbook/create",{
                    "name":this.name,
                    "age":this.age,
                    "compan":this.compan,
                    "phone":this.phone,
                    "idCard":this.idCard,
                    "companId":this.companId,
                    "phontype":pid,
                }).then(resp=>{
                    console.log(resp.data)
                    this.$message({
                        message: '增加成功',
                        type: 'success'
                    });
                    this.isNull();
                    this.getAddressBookData(1,this.page);
                })
            },
            isNull(){
                this.name='';
                this.age='';
                this.compan='';
                this.phone='';
                this.idCard='';
                this.centerDialogVisible = false;
            },
            getKey(name){
                for(let i=0;i<this.sumCompan.length;i++){
                    if (this.sumCompan[i].name == name){
                        this.companId = this.sumCompan[i].code;
                        break;
                    }
                }
            }
        },
    })
</script>
</body>
</html>